* {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
}

ul,
li {
    list-style: none;
}

input {
    outline: none;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

.va {
    vertical-align: middle;
}

/* 清除浮动  */

.clearfix:after {
    visibility: hidden;
    clear: both;
    display: block;
    content: ".";
    height: 0
}

.clearfix {
    *zoom: 1
}


/*版心*/

.con {
    width: 1200px;
    margin: 0 auto;
}

body {
    background-color: #f9f9f9;
}

/* 打勾动画 */
.successText {
    font-family: Helvetica;
    font-size: 26px;
    font-weight: bold;
    opacity: 0;
}

@keyframes circle {
    from {
        stroke-dashoffset: 1194;
    }
    to {
        stroke-dashoffset: 2388;
    }
}

@keyframes tick {
    from {
        stroke-dashoffset: 350;
    }
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes title {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.circle {
    stroke-dasharray: 1194;
    stroke-dashoffset: 1194;
}

.tick {
    stroke-dasharray: 350;
    stroke-dashoffset: 350;
}

.circleAnimation {
    animation: circle 1s ease-in-out;
    animation-fill-mode: forwards;

}

.tickAnimation {
    animation: tick .8s ease-in-out;
    animation-fill-mode: forwards;
    animation-delay: .95s;
}

.succesTextAnimation {
    animation: title .6s ease-in-out;
    animation-delay: 1.2s;
    animation-fill-mode: forwards;
}